<template lang="pug">
    ul.nav_box.m-auto.page-w
        li(v-for="n in pathList" :class="{current: menu(n.pathName)}" :key="n.pathName" @click="toPage(n.pathName)") {{n.name}}
</template>
<script>
export default {
    data () {
        return {
            pathList: [
                {
                    name: '首页',
                    path: '',
                    pathName: 'home',
                },
                {
                    name: '工作动态',
                    path: '',
                    pathName: 'work',
                },
                {
                    name: '榜单发布',
                    path: '',
                    pathName: 'list',
                },
                {
                    name: '评价介绍',
                    path: '',
                    pathName: 'evaluate',
                },
                {
                    name: '联系我们',
                    path: '',
                    pathName: 'we',
                }
            ]
        };
    },
    components: {

    },
    methods: {
        toPage (name) {
            this.$router.push(
                    {
                        name
                    }
            );
        },
        menu(nameVal) {
            let {name} = this.$route;
            return nameVal === name ? 'current' : '';
        }

    },
    mounted () {

    },
    destroyed () {
    }
};
</script>
<style lang="sass" scoped>
    .nav_box
        display: flex
        cursor: pointer
        border-bottom: 1px solid #fff
        li 
            padding: 17px 0
            font-size: 22px 
            margin: 0 60px
            color: #666666
            
            flex: 1
            text-align: center
            border-bottom: #fff solid 3px
            font-weight: 500
            &.current
                color: #004B43
                border-bottom: #004B43 solid 3px
</style>